<template>
  <div class="order-item-container">
    <div class="order-item">
      <h3>安心食疗</h3>
      <router-link to='/shopdetail' class="shop-info clearfix">
        <img src="../../../../assets/himages/1.png" alt="">
        <div class="shop-details">
          <p>五谷养生粥</p>
          <p>增进食欲</p>
          <p>七天退换</p>
        </div>
        <div class="shop-price">
          <p>￥26.00</p>
          <del>30.00</del>
          <p>X1</p>
        </div>
      </router-link>
      <div class="all-price">共1件商品&nbsp;&nbsp;&nbsp;&nbsp;合计：￥26.00(含运费￥0.00)</div>
      <div class="check-buy-info">
        <p class="actvie">确认收货</p>
        <router-link to="/logistics" tag="p">查看物流</router-link>
        <p>延长收货</p>
      </div>
    </div>
    
  </div>
</template>

<script>
  export default {
    name: 'All',
    data () {
      return {}
    },
    
  }
</script>

<style scoped>
.order-item-container{
  text-align: left;
  background: #fff;
  line-height: normal;
}
.order-item{
  margin-bottom: 0.15rem;
}
.order-item h3{
  height: 0.7rem;
  line-height: 0.7rem;
  padding-left: 0.32rem; 
}
.shop-info{
  background-color: #f1f1f1;
  padding: 0.15rem 0.32rem;
}
.shop-info img{
  width: 1.5rem;
  height: 1.5rem;
  float: left;
}
.shop-details{
  float: left;
  margin-left: 0.4rem;
  padding-top: 0.05rem;
}
.shop-details p:nth-child(2){
  margin: 0.18rem 0 0.22rem;
  color: #999;
}
.shop-details p:first-child{
  font-size: 0.26rem;
}
.shop-details p:nth-child(2),.shop-details p:last-child{
  font-size: 0.24rem;
}
.shop-details p:last-child{
  width: 1rem;
  height: 0.28rem;
  line-height: 0.28rem;
  border: 1px solid #9B0303;
  border-radius: 0.05rem;
  color: #9B0303;
  text-align: center;
}
.shop-price{
  float: right;
  margin-top: 0.3rem;
  text-align: right;
  font-size: 0.24rem;
  color: #999;
}
.all-price{
  height: 0.68rem;
  line-height: 0.68rem;
  margin: 0 0.32rem;
  border-bottom: 1px solid #f1f1f1;
  text-align: right;
}
.check-buy-info{
  height: 0.68rem;
  margin-right: 0.32rem;
}
.check-buy-info p{
  float: right;
  width: 1.2rem;
  height: 0.35rem;
  border: 1px solid #A0A0A0;
  border-radius: 0.08rem;
  font-size: 0.24rem;
  margin-left: 0.2rem;
  margin-top: 0.15rem;
  text-align: center;
}
.check-buy-info .actvie{
  color: #fff;
  background-color: #13bf92;
  border: none;
  height: 0.37rem;
}

</style>
